<template>
  <div class="jobmore ct">
      <div class="item-content">
        <el-breadcrumb class="head-nav" :separator-icon="ArrowRight">
          <el-breadcrumb-item :to="{ path: '/yardhome', query: {yardId:id} }">站院首页</el-breadcrumb-item>
          <el-breadcrumb-item >站院介绍</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="new-info">
          <div class="tit">{{ info?.courtyardName }}</div>
          <div class="details" v-html="info?.introduce">
            
          </div>
        </div>
    </div>
  </div>
</template>
<script setup>
import { ArrowRight } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router';
import { getIntroduceVo, getCourtyardById  } from '@/api/home';
import { computed, ref } from 'vue'
const router = useRouter();

  const id = computed(() => router?.currentRoute?.value?.query.yardId)

  const info = ref({})
  
  const getCourtyardById1 = async() => {
    const params = {
      courtyardId: id.value
    }
    const ret = await getCourtyardById(params);
    info.value = ret?.data;
  }
  getCourtyardById1()
  
</script>
<style lang="scss" scoped>
.jobmore {
  flex: 1;
  width: 100%;
  padding: 0 10%;
  color: #777;
  background: url('../../assets/xiaoyuan/4.jpeg') no-repeat center center / cover;
  min-height: 900px;
  padding-bottom: 60px;
  display: flex;
  flex-direction: column;

  .item-content {
    margin: 40px;
    background-color: #fff;
    height: 100%;
    flex: 1;

    .head-nav {
      display: flex;
      align-items: center;
      font-size: 24px;
      padding: 40px 40px 30px;
    }

    .new-info {
      flex: 1;
      background-color: #fff;
      padding: 10px 40px;
      overflow: hidden;
      color: #777;
      .tit {
        font-size: 40px;
        font-weight: bold;
        color: #000;
        padding-bottom: 30px;
        text-align: center;
      }
      .details {
        padding: 20px 0;
        :deep(p) {
          font-size: 24px;
          line-height: 38px;
          color: #333;
          padding-bottom: 30px;
          //text-indent: 2%;
        }
      }
 
    }

  }
}
</style>